<template>
  <div id="app">
    <a-input
        placeholder="请输入任务" class="my_ipt"
        :value="inputValue" @change="handleInputChange"/>
    <a-button type="primary" @click="handleBtnClick">添加事项</a-button>

    <a-list bordered :dataSource="infoList" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <!-- 方法checkboxChange的第一个参数必须传 $event -->
        <a-checkbox :checked="item.done" @change="checkboxChange($event, item.id)">
          {{ item.info }}
        </a-checkbox>
        <!-- 删除链接 -->
        <a slot="actions" @click="removeItemById(item.id)">删除</a>
      </a-list-item>
      <!-- footer区域 -->
      <div class="footer" slot="footer">
        <span>{{getUnDoneCOunt}}条剩余</span>
        <a-button-group>
          <a-button :type="viewKey === 'all' ? 'primary':'default'" @click="changeList('all')">全部</a-button>
          <a-button :type="viewKey === 'undone' ? 'primary':'default'" @click="changeList('undone')">未完成</a-button>
          <a-button :type="viewKey === 'done' ? 'primary':'default'" @click="changeList('done')">已完成</a-button>
        </a-button-group>
        <a @click="clrDone">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>
<script>

	import {mapState, mapGetters} from 'vuex'

	export default {
		name: "app",
		data() {
			return {};
		},
		computed: {
			// 展开表达式 将list inputValue 映射成当前组件的计算属性
			...mapState(['inputValue', 'viewKey']),
			// 未完成任务的数量
			...mapGetters(['getUnDoneCOunt', 'infoList'])
		},
		methods: {
			// 处理输入框修改
			handleInputChange(e) {
				console.log(e.target.value);
				this.$store.commit('setInputValue', e.target.value);
			},

			// 处理添加事项按钮单击
			handleBtnClick() {
				if (this.inputValue.trim().length <= 0) {
					return this.$message.warn('文本框内容不可为空!');
				}

				this.$store.commit('addItem');
			},

			checkboxChange(e, id) {
				console.log(id);
				// e.target.checked 获取当前选择的选项选中状态
				console.log(e.target.checked);
				const param = {
					id: id,
					status: e.target.checked
				};
				this.$store.commit('changeStatus', param);

			},

			// 移除某一项
			removeItemById(id) {
				console.log(id);
				this.$store.commit('removeItemById', id);
			},
			// 清除已完成的任务
			clrDone() {
				this.$store.commit('clearDone');
			},
			// 修改列表数据
			changeList(key) {
				// console.log(key);
				this.$store.commit('changeViewKey', key);
			},
		},
		created() {
			// 触发 action
			this.$store.dispatch('getList');
		}
	};
</script>
<style scoped>
  #app {
    padding: 10px;
  }

  .my_ipt {
    width: 500px;
    margin-right: 10px;
  }

  .dt_list {
    width: 500px;
    margin-top: 10px;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
